<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInDown 0.8s ease;
}

.title {
  font-size: 2.8rem;
  color: #2c3e50;
  margin-bottom: 15px;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.subtitle {
  font-size: 1.2rem;
  color: #5a6b7c;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.intention-box {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 18px;
  padding: 25px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin: 25px auto 40px;
  max-width: 500px;
  text-align: center;
  animation: fadeIn 1s ease;
  border: 1px solid #eaeaea;
}

.intention-label {
  font-size: 1rem;
  color: #7f8c8d;
  margin-bottom: 10px;
  display: block;
}

.intention-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3498db;
}

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  transform: translateY(0);
  border: 1px solid #f0f0f0;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-header {
  padding: 25px 25px 20px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.feature-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c3e50;
}

.card-body {
  padding: 0 25px;
  flex: 1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
}

.feature-card.expanded .card-body {
  max-height: 300px;
  padding: 0 25px 25px;
}

.feature-desc {
  color: #555;
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 15px;
}

.detail-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 15px;
  margin-top: 10px;
  border-left: 3px solid #3498db;
}

.detail-title {
  font-weight: 600;
  color: #3498db;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.detail-content {
  color: #5a6b7c;
  line-height: 1.6;
}

.card-footer {
  background: #f9fbfd;
  padding: 15px 25px;
  color: #7f8c8d;
  font-size: 0.9rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag {
  background: #e1f0fa;
  color: #3498db;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.expand-icon {
  transition: transform 0.3s ease;
}

.feature-card.expanded .expand-icon {
  transform: rotate(180deg);
}

.success-badge {
  position: relative;
  max-width: 200px;
  margin: 0 auto 30px;
  text-align: center;
  background: #2ecc71;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}

.tech-stack {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  max-width: 500px;
  margin: 50px auto 0;
  animation: fadeIn 1.2s ease;
}

.tech-label {
  font-size: 1rem;
  color: #7f8c8d;
  margin-bottom: 10px;
}

/* 悬浮操作按钮样式 */
.hover-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  border-radius: 16px;
}

.feature-card:hover .hover-actions {
  opacity: 1;
}

.action-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-btn i {
  font-size: 24px;
  margin-bottom: 8px;
}

.remove-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff4757);
  color: white;
}

.edit-btn {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
}

.action-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 添加卡片样式 */
.add-feature-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
  border: 2px dashed #3498db;
  transition: all 0.3s ease;
}

.add-feature-card:hover {
  background: #e3f2fd;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.2);
}

.add-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.add-icon {
  font-size: 4rem;
  color: #3498db;
  transition: all 0.3s ease;
}

.add-feature-card:hover .add-icon {
  transform: scale(1.2);
  color: #2ecc71;
}

.add-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3498db;
  opacity: 0.8;
}

/* Element Plus 表单样式 */
.el-form {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
}

.el-input,
.el-textarea {
  border-radius: 8px;
}

.el-button {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

.el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.el-dialog__header {
  background: linear-gradient(135deg, #3498db, #2ecc71);
  margin: 0;
  padding: 20px;
}

.el-dialog__title {
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
}

.el-dialog__headerbtn {
  top: 20px;
  right: 20px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 1.5rem;
}

.el-dialog__body {
  padding: 25px;
}

.el-dialog__footer {
  padding: 15px 25px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.form-title {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  font-size: 1.8rem;
  font-weight: 700;
  color: #3498db;
}

.form-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.form-icon i {
  font-size: 3rem;
  color: #3498db;
  background: #e1f0fa;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-select {
  width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card:nth-child(1) {
  animation: cardEntrance 0.6s ease;
}

.feature-card:nth-child(2) {
  animation: cardEntrance 0.8s ease;
}

.feature-card:nth-child(3) {
  animation: cardEntrance 1.0s ease;
}

.feature-card:nth-child(4) {
  animation: cardEntrance 1.2s ease;
}

.feature-card:nth-child(5) {
  animation: cardEntrance 1.4s ease;
}

@media (max-width: 768px) {
  .features-container {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 2.2rem;
  }

  .card-header {
    padding: 20px;
  }

  .action-btn {
    width: 70px;
    height: 70px;
    font-size: 12px;
  }

  .action-btn i {
    font-size: 20px;
  }
}

.tech-stack {
  position: relative;
  padding: 10px 40px 10px 10px;
  /* 为按钮留出空间 */
}

.edit-button {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-stack:hover .edit-button {
  opacity: 1;
}

.edit-button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}
</style>
<template>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <div class="container">
    <header>
      <h1 class="title">{{ historyStore.currentResponse.intention }}</h1>
      <p class="subtitle">管理您的功能卡片，添加新功能或编辑现有功能</p>
    </header>


    <div class="features-container">
      <!-- 功能卡片 -->
      <div v-for="(func, index) in historyStore.currentResponse.func" :key="index" class="feature-card"
        :class="{ expanded: expandedIndex !== index }">
        <!-- 悬浮操作按钮 -->
        <div class="hover-actions" v-if="historyStore.currentWorkflow == null">
          <div class="action-btn remove-btn" @click.stop="openRemoveDialog(index)">
            <i class="fas fa-trash-alt"></i>
            <span>移除</span>
          </div>
          <div class="action-btn edit-btn" @click.stop="openEditDialog(index)">
            <i class="fas fa-edit"></i>
            <span>编辑</span>
          </div>
        </div>

        <div class="card-header">

          <h3 class="feature-name">{{ func.name }}</h3>
        </div>

        <div class="card-body">
          <p class="feature-desc">{{ func.description }}</p>

          <div class="detail-info" v-if="func.input || func.output">
            <div class="detail-title">
              功能详情
            </div>
            <div class="detail-content">
              <p v-if="func.input">输入：{{ func.input }}</p>
              <p v-if="func.output">输出：{{ func.output }}</p>
            </div>
          </div>
        </div>


      </div>

      <!-- 添加功能卡片 -->
      <div class="feature-card add-feature-card" @click="openAddDialog" v-if="historyStore.currentWorkflow == null">
        <div class="add-content">
          <i class="fas fa-plus add-icon"></i>
          <div class="add-text">添加新功能</div>
        </div>
      </div>
    </div>

    <div class="tech-stack" v-if="historyStore.currentResponse.language">
      <div class="tech-label">技术栈</div>
      <h3>{{ historyStore.currentResponse.language }}</h3>
      <button class="edit-button" @click="showEditDialog = true" v-if="historyStore.currentWorkflow == null">
        <i class=" fas fa-edit"></i>
      </button>

      <el-dialog v-model="showEditDialog" title="编辑技术栈" width="30%" :before-close="handleClose">
        <el-input v-model="editedLanguage" placeholder="输入新的技术栈"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

  <!-- 添加功能对话框 -->
  <el-dialog v-model="addDialogVisible" title="添加新功能" width="600px">
    <div class="form-icon">
      <i class="fas fa-plus"></i>
    </div>
    <h3 class="form-title">添加新功能</h3>
    <el-form :model="newFeature" label-width="120px">
      <el-form-item label="功能名称">
        <el-input v-model="newFeature.name" placeholder="请输入功能名称" />
      </el-form-item>
      <el-form-item label="功能描述">
        <el-input v-model="newFeature.description" type="textarea" :rows="3" placeholder="请输入功能详细描述" />
      </el-form-item>
      <el-form-item label="输入信息">
        <el-input v-model="newFeature.input" placeholder="请输入功能需要的输入信息" />
      </el-form-item>
      <el-form-item label="输出信息">
        <el-input v-model="newFeature.output" placeholder="请输入功能的输出结果" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addFeature">添加功能</el-button>
    </template>
  </el-dialog>

  <!-- 编辑功能对话框 -->
  <el-dialog v-model="editDialogVisible" title="编辑功能" width="600px">
    <div class="form-icon">
      <i class="fas fa-edit"></i>
    </div>
    <h3 class="form-title">编辑功能</h3>
    <el-form :model="editingFeature" label-width="120px">
      <el-form-item label="功能名称">
        <el-input v-model="editingFeature.name" placeholder="请输入功能名称" />
      </el-form-item>
      <el-form-item label="功能描述">
        <el-input v-model="editingFeature.description" type="textarea" :rows="3" placeholder="请输入功能详细描述" />
      </el-form-item>
      <el-form-item label="输入信息">
        <el-input v-model="editingFeature.input" placeholder="请输入功能需要的输入信息" />
      </el-form-item>
      <el-form-item label="输出信息">
        <el-input v-model="editingFeature.output" placeholder="请输入功能的输出结果" />
      </el-form-item>



    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveFeature">保存更改</el-button>
    </template>
  </el-dialog>

  <!-- 删除确认对话框 -->
  <el-dialog v-model="removeDialogVisible" title="移除功能" width="500px">
    <div class="form-icon">
      <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i>
    </div>
    <h3 class="form-title" style="color: #e74c3c;">移除功能确认</h3>
    <div style="text-align: center; padding: 20px;">
      <p style="font-size: 1.2rem; margin-bottom: 20px;">
        确定要移除 <strong style="color: #e74c3c;">{{ removeFeatureName }}</strong> 功能吗？
      </p>
      <p style="color: #7f8c8d;">
        此操作不可撤销，请谨慎操作。
      </p>
    </div>
    <template #footer>
      <el-button @click="removeDialogVisible = false">取消</el-button>
      <el-button type="danger" @click="confirmRemove">确认移除</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { useHistoryStore } from '@/stores/history';
const historyStore = useHistoryStore()
const expandedIndex = ref(null);
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const removeDialogVisible = ref(false);
const currentEditIndex = ref(null);
const currentRemoveIndex = ref(null);
const removeFeatureName = ref('');
const editedLanguage = ref(historyStore.currentResponse.language || ''); // 初始化为当前语言
const showEditDialog = ref(false)
const newFeature = ref({
  name: '',
  description: '',
  input: '',
  output: '',
});

const editingFeature = ref({
  name: '',
  description: '',
  input: '',
  output: '',

});


const icons = ref([
  'fas fa-money-bill-wave',
  'fas fa-file-invoice',
  'fas fa-chart-pie',
  'fas fa-wallet',
  'fas fa-file-export'
])

const iconColors = ref([
  'linear-gradient(135deg, #3498db, #2ecc71)',
  'linear-gradient(135deg, #9b59b6, #8e44ad)',
  'linear-gradient(135deg, #e74c3c, #c0392b)',
  'linear-gradient(135deg, #f39c12, #d35400)',
  'linear-gradient(135deg, #1abc9c, #16a085)'
])
const handleClose = () => {
  // 重置编辑内容
  editedLanguage.value = historyStore.currentResponse.language;
  showEditDialog.value = false;
}
const saveEdit = () => {
  // 保存编辑内容
  historyStore.currentResponse.language = editedLanguage.value;
  editedLanguage.value = ''
  showEditDialog.value = false;
}


const openAddDialog = () => {
  newFeature.value = {
    name: '',
    description: '',
    input: '',
    output: '',

  };
  addDialogVisible.value = true;
};

const openEditDialog = (index) => {
  currentEditIndex.value = index;
  editingFeature.value = { ...historyStore.currentResponse.func[index] };
  editDialogVisible.value = true;
};

const openRemoveDialog = (index) => {
  currentRemoveIndex.value = index;
  removeFeatureName.value = historyStore.currentResponse.func[index].name;
  removeDialogVisible.value = true;
};

const addFeature = () => {
  if (!newFeature.value.name.trim()) {
    ElMessage.error('功能名称不能为空');
    return;
  }

  historyStore.currentResponse.func.push({ ...newFeature.value });
  icons.value.push('fas fa-cog');
  iconColors.value.push('linear-gradient(135deg, #3498db, #9b59b6)');

  addDialogVisible.value = false;
  ElMessage.success('功能添加成功');
  historyStore.currentResponseIsEdit = true
};

const saveFeature = () => {
  if (!editingFeature.value.name.trim()) {
    ElMessage.error('功能名称不能为空');
    return;
  }

  historyStore.currentResponse.func[currentEditIndex.value] = { ...editingFeature.value };
  editDialogVisible.value = false;
  ElMessage.success('功能更新成功');
  historyStore.currentResponseIsEdit = true
};

const confirmRemove = () => {
  historyStore.currentResponse.func.splice(currentRemoveIndex.value, 1);
  icons.value.splice(currentRemoveIndex.value, 1);
  iconColors.value.splice(currentRemoveIndex.value, 1);

  if (expandedIndex.value === currentRemoveIndex.value) {
    expandedIndex.value = null;
  } else if (expandedIndex.value > currentRemoveIndex.value) {
    expandedIndex.value -= 1;
  }

  removeDialogVisible.value = false;
  ElMessage.success('功能已移除');
  historyStore.currentResponseIsEdit = true
};



</script>
